<template>
  <div class="container">
     <div class="mainbody">
      <div class="title">登录</div>
        <div class="form">
            <el-form
              label-position="right"
              label-width="50px"
              :model="formLabelAlign"
              style="max-width: 300px;height: 85px;cursor: pointer;  caret-color: black; "
            >
              <el-form-item label="账号:">
                <el-input v-model="formLabelAlign.username" />
              </el-form-item>
              <el-form-item label="密码:">
                <el-input v-model="formLabelAlign.password" />
              </el-form-item>
            </el-form>
            <div style="font-size: 13px;padding-top:3px;padding-left: 200px; color: blue;" @click="toRegister">去注册</div>
       </div>
        <div style="margin-top: 10px;">
       <el-button style="color: white;font-size: 17px; border-radius: 20px;height: 35px;width: 120px; background: linear-gradient(90deg,#3cadeb,#9c88ff);"  @click="login">登录</el-button>
     </div>
    </div>
  </div>
</template>

<script>
import api from "../api/index"
export default{
  data() {
    return {
      formLabelAlign:{
        username: '',
        password: ''
        }
    }
  },
  methods:{
    toRegister() {
      this.$router.push("/register")
    },
    async login() {
      try {
        console.log(this.formLabelAlign.username,this.formLabelAlign.password);
      let formData = new FormData();
      formData.append('username', this.formLabelAlign.username);
      formData.append('password', this.formLabelAlign.password);
      const params =formData;
        const response = await api.login(params);
        const access_token=response.access_token;
        if(localStorage.getItem("access_token")==null) {
        localStorage.setItem("access_token","0");
        }
        localStorage.setItem("access_token",access_token);
        console.log("成功",response);
        this.$message({
          message:"登录成功",
          type:'success'
          })
          this.$router.push("/CommontChat")

      } catch (error) {
        // 处理登录失败后的逻辑

        console.error("报错",error);
        this.$message({
          message:"失败",
          type:'error'
          })
      }
  }
}
}

</script>

<style>
.container {
  width: 100vw;     /* 占满浏览器宽度 */
  height: 100vh;    /* 占满浏览器高度 */
  display: flex;
  background-color: rgb(139, 159, 234);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor:default;
  caret-color: transparent;
}   
.container .mainbody{
  width:400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;
  background-color: bisque;
}
.mainbody .title {
  width: 100px;
  height: 50px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  color: black;
}


.mainbody .form {
  width: 300px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>